<template>
    <div>
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>其他管理</el-breadcrumb-item>
            <el-breadcrumb-item>代码生成</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片主体 -->
        <el-card class="box-card">
            <div class="block">
                <div  class="tips">
                    <p>以下所有为必填项！</p>
                    <span style="font-weight: bold">特别注意:</span>
                    <span>- id 设置自增</span>
                    <span>- 写注释</span>
                    <span>- 图片字段命名 img</span>
                </div>
                <div class="formList">
                    <el-form :model="dataList" label-width="100px" :inline="true">
                        <div class="tipsTop">
                            <i class="el-icon-s-order"></i><span>源库信息</span>
                        </div>
                        <el-divider></el-divider>
                        <el-form-item label="数据库账号"><el-input  v-model="dataList.userName" placeholder="请输入数据库账号" clearable></el-input></el-form-item>
                        <el-form-item label="数据库密码"><el-input  v-model="dataList.password" placeholder="请输入数据库密码" clearable></el-input></el-form-item>
                        <el-form-item label="数据库名称"><el-input  v-model="dataList.schemaName" placeholder="请输入数据库名" clearable></el-input></el-form-item>
                        <el-form-item label="数据库表名"><el-input  v-model="dataList.tableName" placeholder="请输入表名" clearable></el-input></el-form-item>
                        <div class="tipsTop">
                            <i class="el-icon-s-order"></i><span>生成条件信息</span>
                        </div>
                        <el-divider></el-divider>
                        <el-form-item label="项目模块名"><el-input  v-model="dataList.modeName" placeholder="请输入模块名" clearable></el-input></el-form-item>
                        <el-form-item label="查询条件字段"><el-input  v-model="dataList.cols" placeholder="默认为1个搜索条件" clearable></el-input></el-form-item>
                        <el-form-item label="前端项目位置"><el-input  v-model="dataList.projectPath" placeholder="请输入前端项目位置" clearable></el-input></el-form-item>
                        <div style="height: 5px;width: 100%"></div>
                        <el-form-item class="elBtn">
                              <el-button type="primary" @click="handleAdd">生成</el-button>
                              <el-button @click="cancelBtn">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>
    </div>

</template>
<script>
    import {Message} from "element-ui";
    import api from "@/api/coding";
    export default {
        data(){
            return{
                dataList: {}
            }
        },
        methods: {
            handleAdd() {
                api.create(this.dataList).then(res => {
                    Message.success(res.message);
                    this.dataList = {};
                });
            },
            cancelBtn() {
                this.dataList = {};
            }
        }
    }
</script>
<style scoped lang="less">
    .box-card{
        background: rgb(230,232,234);
        min-height: 600px;
    }
    .block{
        width:90%;
        margin:0 auto;
        background: #fff;
        min-height: 600px;
        padding:10px 20px;
     }
    .tipsTop{

        line-height: 50px;
        i{
            color:#5cb6ff;
            font-size:25px;
        }
        span{
            font-size: 20px;
        }
    }
    .el-divider--horizontal{
        margin: 10px;
    }
    .tips{
        text-align: center;
        line-height: 30px;
        width: 80%;
        background: rgb(254,251,218);
        border:1px solid rgb(249,249,229);
        margin:20px auto;
        color:rgb(232,168,54);
        font-size: 14px;
    }
    .formList{
        width: 800px;
        margin:30px auto;
    }
    .formList .el-form{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .formList .el-form-item{
        width: 45%;
    }
    .elBtn{
        text-align: center;
        width: 350px;
        margin: 0 auto;
    }
    .elBtn button{
        width: 100px;
    }
</style>
